<template>
	<view class="container">
		<view class="form-box">
			<view class="form-item">
				<text class="label">订单类型</text>
				<view class="type-list">
					<view 
						v-for="(item, index) in orderTypes" 
						:key="index"
						:class="['type-item', selectedType === index ? 'active' : '']"
						@tap="selectType(index)"
					>
						{{item}}
					</view>
				</view>
			</view>
			
			<view class="form-item">
				<text class="label">标题</text>
				<input type="text" v-model="formData.title" placeholder="请输入标题" />
			</view>
			
			<view class="form-item">
				<text class="label">描述</text>
				<textarea v-model="formData.description" placeholder="请详细描述您的需求" />
			</view>
			
			<view class="form-item">
				<text class="label">地点</text>
				<input type="text" v-model="formData.location" placeholder="请输入地点" />
			</view>
			
			<view class="form-item">
				<text class="label">报酬 (元)</text>
				<input type="digit" v-model="formData.price" placeholder="请输入金额" />
			</view>
			
			<view class="form-item">
				<text class="label">截止时间</text>
				<picker mode="time" :value="formData.deadline" @change="onTimeChange">
					<view class="picker">
						{{formData.deadline || '请选择时间'}}
					</view>
				</picker>
			</view>
		</view>
		
		<view class="submit-btn" @tap="submitOrder">
			发布订单
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderTypes: ['取快递', '买饭', '打印', '其他'],
			selectedType: -1,
			formData: {
				title: '',
				description: '',
				location: '',
				price: '',
				deadline: '',
				type: ''
			}
		}
	},
	methods: {
		selectType(index) {
			this.selectedType = index
			this.formData.type = this.orderTypes[index]
		},
		onTimeChange(e) {
			this.formData.deadline = e.detail.value
		},
		submitOrder() {
			// 表单验证
			if (this.selectedType === -1) {
				uni.showToast({
					title: '请选择订单类型',
					icon: 'none'
				})
				return
			}
			if (!this.formData.title.trim()) {
				uni.showToast({
					title: '请输入标题',
					icon: 'none'
				})
				return
			}
			if (!this.formData.description.trim()) {
				uni.showToast({
					title: '请输入描述',
					icon: 'none'
				})
				return
			}
			if (!this.formData.location.trim()) {
				uni.showToast({
					title: '请输入地点',
					icon: 'none'
				})
				return
			}
			if (!this.formData.price) {
				uni.showToast({
					title: '请输入报酬',
					icon: 'none'
				})
				return
			}
			if (!this.formData.deadline) {
				uni.showToast({
					title: '请选择截止时间',
					icon: 'none'
				})
				return
			}
			
			// TODO: 发送请求保存订单
			uni.showLoading({
				title: '发布中...'
			})
			
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '发布成功',
					icon: 'success'
				})
				// 返回首页
				uni.switchTab({
					url: '/pages/index/index'
				})
			}, 1500)
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: $background-color;
	padding-bottom: 120rpx;
}

.form-box {
	background-color: #fff;
	padding: 20rpx;
	margin-top: 20rpx;
	
	.form-item {
		margin-bottom: 30rpx;
		
		.label {
			font-size: 28rpx;
			color: $text-color;
			margin-bottom: 20rpx;
			display: block;
		}
		
		input, textarea, .picker {
			width: 100%;
			background-color: #f5f5f5;
			padding: 20rpx;
			border-radius: 8rpx;
			font-size: 28rpx;
		}
		
		textarea {
			height: 200rpx;
		}
		
		.type-list {
			display: flex;
			flex-wrap: wrap;
			margin: 0 -10rpx;
			
			.type-item {
				width: calc(25% - 20rpx);
				margin: 10rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #f5f5f5;
				border-radius: 8rpx;
				font-size: 28rpx;
				color: $text-color;
				
				&.active {
					background-color: $theme-color;
					color: #fff;
				}
			}
		}
	}
}

.submit-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: $theme-color;
	color: #fff;
	font-size: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style> 